<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="checkbox" id="checkall"> <label for="checkall">全选</label>
    <br>
    <input type="checkbox" class="childCheckbox" id="checkbox1"> <label for="checkbox1">选项1</label>
    <input type="checkbox" class="childCheckbox" id="checkbox2"> <label for="checkbox2">选项2</label>
    <input type="checkbox" class="childCheckbox" id="checkbox3"> <label for="checkbox3">选项3</label>
    <!-- 更多选项... -->

    <script>

        // 获取全选复选框  
        const checkall = document.getElementById('checkall');
        // 获取所有单个复选框  
        const childCheckboxes = document.querySelectorAll('.childCheckbox');
        // 监听全选复选框的变化  
        checkall.addEventListener('change', () => {
            // 根据全选复选框的选中状态，更新所有单个复选框的选中状态  
            childCheckboxes.forEach(item => {
                item.checked = checkall.checked;
            });
        });

        // 监听单个复选框的变化  
        childCheckboxes.forEach(item => {
            item.addEventListener('change', () => {
                // 检查是否所有单个复选框都被选中  
                const allChecked = Array.from(childCheckboxes).every(cb => cb.checked);
                // 更新全选复选框的选中状态  
                checkall.checked = allChecked;
            });
        });
        /*
           这段代码首先获取了全选复选框和所有单个复选框的引用。然后，它分别为全选复选框和每个单个复选框添加了change事件监听器。
           当全选复选框的状态发生变化时，它会遍历所有单个复选框，并将它们的选中状态设置为与全选复选框相同。
           当任何一个单个复选框的状态发生变化时，它会检查所有单个复选框是否都被选中。
               如果是，它将全选复选框设置为选中状态；如果不是，它将全选复选框设置为未选中状态。
        */
    </script>
</body>

</html>